<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>回到顶部组件</title>
    <style>
        /* 测试body
        body{
            height: 5000px;
            margin:0;
            padding:0;
        }
        .bigbox {
            height: 10000px;
            margin: 0;
            padding: 0;
            background-color: blueviolet;
        } */

        body {
            height: 20000px;
            margin: 0;
            padding: 0;
            background-color: #eee;
        }

        #test {
            width: 150px;
            height: 150px;
            position: fixed;
            right: 50px;
            bottom: 50px;
            background-color: rgb(251, 114, 153);
        }

        /* 测试样式 */
        #test.scroll-to-top-transition {
            background-color: blueviolet;
            transition: background-color 3s ease;
        }

        /* #test:hover { 特异性不够，不生效
            background-image: url('./assets/active-rocket.png');
            animation: active-rocket steps(1, start) 0.5s infinite;
            animation-duration: 0.5s;
            animation-timing-function: steps(1, start);
            animation-delay: 0s;
            animation-iteration-count: infinite;
            animation-direction: normal;
            animation-fill-mode: none;
            animation-play-state: running;
            animation-name:active-rocket
        } */
    </style>
</head>

<body>
    <div class="bigbox"></div>
    <span id="test">
    </span>
    <script src="./JS/core.js"></script>
    <script>
        var test = new ScrollToTop("#test", {
            showDis: 300,
            delayTime: 300,
            step: 150,
            fadeSpeed: 5,
            callback: function () {
                console.log('回调函数成功触发。');
            },
            imgSrc: './assets/rocket.png'
        });
        console.log(test);
    </script>
</body>

</html>